<template>
  <div>
    <header>
      <!-- 简介 -->
      <div style="width: 100%; padding-left: 20px;">
        <div style="width: 60px;display: flex; margin-top: 40px">
          <div  style="width: 160px">
            <div style="cursor: pointer">
              <div style="display: inline-block; width: 200px">
                <el-avatar style="width: 50px; border-radius: 50%; position: relative; top:10px; right: 5px; height: 50px">
                  <img :src="person.avatarUrl" alt="" style="width: 50px; height: 50px">
                </el-avatar>
                <span style="font-size: 20px; margin-left: 20px;">{{ person.nickname }}</span>
              </div>
            </div>
          </div>
          <el-button v-if="!this.concern" type="primary" style="height: 30px; margin-top: 30px" @click="handleChangeConcern()">关注</el-button>
          <el-button v-else type="danger" style="height: 30px; margin-top: 30px" @click="handleChangeConcern()">已关注</el-button>
        </div>
      </div>
      <!--菜单-->
      <div style="margin-top: 16px">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" style="border: 1px solid #cccc">
          <el-menu-item index="1" @click="changeType('1')">文章</el-menu-item>
          <el-menu-item index="2" @click="changeType('2')">关注</el-menu-item>
        </el-menu>
      </div>
    </header>
    <!-- 内容 -->
    <div style="overflow: hidden">
      <!-- 文章 -->
      <div v-if="this.type == '1'">
<!--        <div style="margin-top: 12px">-->
<!--          <el-input style="width: 400px" placeholder="请输入标题" suffix-icon="el-icon-search" v-model="name"></el-input>-->
<!--          <el-button style="margin-left: 5px" type="primary" @click="loadArticle">搜索</el-button>-->
<!--          <el-button style="margin-left: 5px" type="warning" @click="reset">重置</el-button>-->
<!--        </div>-->
        <div style="margin: 10px 0; width: 100%;">
          <div style="padding: 20px 0; border-bottom: 1px dashed #ccc; display: flex" v-for="item in tableData" :key="item.id" >
            <div>
              <img :src="item.coverUrl" alt="" style="width: 110px; height: 60px; margin-right: 10px"/>
            </div>
            <div style="margin-top: 10px">
              <div style="padding: 5px; font-size: 16px; cursor: pointer" @click="$router.push('/front/articleDetail?id=' + item.id)">{{item.name}}</div>
              <div style="padding: 5px; font-size: 12px">
                <div style="display: inline-block; width: 80px"><i class="el-icon-user-solid"></i><span>{{item.user}}</span></div>
                <i class="el-icon-time" style="margin-left: 5px;"></i><span>{{ new Date(item.createTime).toLocaleDateString() }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关注 -->
      <div v-if="this.type == '2'" style="display: flex" >
        <el-aside style="width: 170px">
          <div  style=" background-color: rgb(238, 241, 246); width: 170px">
            <el-menu style="overflow: hidden; min-height: 100%;"
                     :collapse-transition="false"
                     class="el-meun-vertical-demo, collectAside"
                     default-active="system"
            >
              <div  style="border: 1px solid #e6e6e6;">
                <div v-for="item in concernUsers" style="display: flex; border-bottom: 1px solid #ccc"  @click="loadUserConcernData(item.id)">
                  <!-- 头像 -->
                  <div style="width: 60px; text-align: center">
                    <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
                  </div>
                  <div style="margin-top: 20px; font-size: 16px; color: #409EFF">{{item.nickname}}</div>
                </div>
              </div>
            </el-menu>
          </div>
        </el-aside>
        <el-container >
          <el-main>
            <div style="padding: 20px 0; border-bottom: 1px dashed #ccc; display: flex" v-for="item in concernData" :key="item.id" >
              <div>
                <img :src="item.coverUrl" alt="" style="width: 110px; height: 60px; margin-right: 10px"/>
              </div>
              <div style="margin-top: 10px">
                <div style="padding: 5px; font-size: 16px; cursor: pointer" @click="$router.replace('/front/articleDetail?id=' + item.id)">{{item.name}}</div>
                <div style="padding: 5px; font-size: 12px">
                  <div style="display: inline-block; width: 80px"><i class="el-icon-user-solid"></i><span>{{item.user}}</span></div>
                  <i class="el-icon-time" style="margin-left: 5px;"></i><span>{{ new Date(item.createTime).toLocaleDateString() }}</span>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>

  </div>
</template>

<script>
import user from "@/views/User.vue";

export default {
  name: "PersonDetail",
  data() {
    return {
      person:{},
      id: this.$route.query.id ? this.$route.query.id : 0,
      tableData:[],
      concernUsers:[],
      type: '1',
      concernData:[],
      concern: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    this.request.get("user/show/" + this.id).then(res => {
      this.person = res.data
    })
    this.loadArticle();
    this.loadConcern();
  },
  methods: {
    loadConcernData(userId) {
      this.request.get("concern/article/" + userId).then(res => {
        this.concernData = res.data
      })
    },
    loadUserConcernData(userId) {
      this.request.get("article/user/" + userId).then(res => {
        this.concernData = res.data
      })
    },
    handleChangeConcern() {
      if (this.concern) {
        this.request.delete("concern/delete/" + this.id).then(res => {
          if (res.code != '200') {
            this.$message = res.msg
          }else {
            this.concern = false
          }
        })
      } else {
        this.request.post("/concern", {
          "myId" : this.user.id,
          "concernId" : this.id
        }).then(res => {
          if (res.code === '200') {
            this.concern = res.data
            this.concern = true
          }
        })
      }
      // this.loadConcern()
    },
    loadArticle() {
      this.request.get("/article/user/" + this.id).then(res => {
        this.tableData = res.data
      })
    },
    loadConcern() {
      this.request.get("/concern/isConcern/" + this.id).then(res => {
        // console.log(res)
        this.concern = res.data
      })
    },
    loadConcernUsers() {
      this.request.get("/concern/users/" + this.id).then(res => {
        this.concernUsers = res.data
      })
    },
    changeType(type) {
      this.type = type
      if (type === '2') {
        this.loadConcernUsers()
        this.loadConcernData(this.id)
      }
    },
  },

}
</script>

<style scoped>

</style>